<template>
  <div class="container" v-if="$route.path === '/canteen/menu-manger'">
    <div class="header">
      <el-form :model="searchForm" inline ref="searchRef">
        <el-form-item label="食堂" prop="canteen">
          <el-select
            v-model="searchForm.canteen"
            placeholder="请选择食堂"
            size="small"
            style="width: 160px"
          >
            <el-option
              v-for="item in option"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="startTime" label="时间区间">
          <el-date-picker
            size="small"
            style="width: 160px"
            v-model="searchForm.startTime"
            type="date"
            placeholder="开始时间"
            value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="endTime">
          <el-date-picker
            size="small"
            style="width: 160px"
            v-model="searchForm.endTime"
            type="date"
            placeholder="结束时间"
            value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="searchForm.status"
            placeholder="全部"
            size="small"
            style="width: 160px"
          >
            <el-option
              v-for="item in menuStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <TsButton
          perms="food-menu:page:get"
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="search"
          label="搜索"
        >
        </TsButton>
        <el-button size="mini" icon="el-icon-refresh-right" @click="reset"
          >重置
        </el-button>
      </el-form>
      <div class="hd-right c-m-t-5">
        <TsButton
          label="导入"
          type="primary"
          size="mini"
          @click="info"
          perms="food-week:import:post"
        ></TsButton>
        <TsButton
          label="导出"
          perms="food-week:export:post"
          type="primary"
          size="mini"
          @click="exportMenu"
        ></TsButton>
        <TsButton
          label="提交"
          perms="food-week:submit:put"
          type="primary"
          size="mini"
          @click="multipleSubmit"
        ></TsButton>
        <TsButton
          perms="food-week:take:down"
          type="danger"
          size="mini"
          @click="menuDown"
          label="下架"
        ></TsButton>
        <!--        <TsButton-->
        <!--          perms="food-menu:post"-->
        <!--          type="primary"-->
        <!--          size="small"-->
        <!--          @click="edit"-->
        <!--          label="新增"-->
        <!--        ></TsButton>-->
        <TsButton
          perms="food-week:delete"
          type="danger"
          size="mini"
          @click="delMultipleTable"
          label="删除"
        ></TsButton>

        <!-- -->
      </div>
    </div>
    <!--    表格区域-->
    <div class="table" style="height: calc(100% - 140px); overflow-y: auto">
      <el-table
        ref="multipleTable"
        :header-cell-style="{ background: '#FEF6F6' }"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column label="食堂" prop="canteen.name"> </el-table-column>
        <el-table-column label="日期" sortable>
          <template #default="scope">
            <span>{{ scope.row.beginTime }}</span> -
            <span>{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
          <template #default="scope">
            <el-tag size="mini" type="success" v-if="scope.row.status === 1"
              >待提交</el-tag
            >
            <el-tag size="mini" type="warning" v-if="scope.row.status === 2"
              >待审核</el-tag
            >
            <el-tag size="mini" type="info" v-if="scope.row.status === 3"
              >已下架</el-tag
            >
            <el-tag size="mini" type="success" v-if="scope.row.status === 4"
              >已通过</el-tag
            >
            <el-tag size="mini" type="danger" v-if="scope.row.status === 5"
              >驳回</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="description" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <TsButton
              @click="edit(scope.row)"
              size="small"
              label="编辑"
              perms="food-menu:$id:put"
              type="text"
              icon="el-icon-edit"
              v-show="false"
              >编辑</TsButton
            >
            <TsButton
              label="删除"
              perms="food-week:$id:delete"
              style="color: #ff5d5d"
              @click="del(scope.row.id)"
              size="small"
              type="text"
              icon="el-icon-delete"
              v-show="scope.row.status !== 2"
            >
              删除
            </TsButton>
            <TsButton
              label="下架"
              perms="food-week:take:down"
              style="color: #ff5d5d"
              @click="signMenuDown(scope.row.id)"
              size="small"
              type="text"
              icon="el-icon-download"
              v-show="scope.row.status === 4"
            >
            </TsButton>
            <el-button
              @click="toDetail(scope.row.id)"
              size="small"
              type="text"
              icon="el-icon-info"
              v-show="scope.row.status === 2 || scope.row.status === 4"
              >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="float: right; margin: 20px"
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      layout=" prev, pager, next"
      :total="totalNum"
      background
    >
    </el-pagination>
    <!--    导入对话框-->
    <el-dialog
      v-model="importDialogVisible"
      title="导入"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="importFormRef" :model="infoForm" label-position="right">
        <el-form-item label="食堂" prop="region">
          <el-select
            v-model="infoForm.region"
            placeholder="请选择食堂"
            size="small"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              :key="index"
              v-for="(item, index) in option"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="time">
          <el-date-picker
            size="small"
            v-model="infoForm.time"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="上传">
          <el-upload
            drag
            :limit="limitNum"
            accept=".xls"
            action="/api/storages"
            :before-upload="beforeUploadFile"
            :on-exceed="exceedFile"
            :on-success="handleSuccess"
            :on-error="handleError"
            :headers="header"
            :file-list="fileList"
            name="multipartFile"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">只能上传xls文件，且不超过10M</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" type="primary" @click="submitImport"
            >提交</el-button
          >
          <el-button @click="cancelImport" size="small">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <router-view></router-view>
</template>

<script>
import menuManger from "@/composables/canteen/menu-manger";
import commonPageRepository from "../../../composables/common-page-repository";
import { reactive } from "vue";
import Cookies from "js-cookie";
import TsButton from "../../../components/TsButton";

export default {
  name: "MenuManger",
  components: { TsButton },
  setup() {
    const {
      handleClose,
      cancelImport,
      importFormRef,
      exportRef,
      exportForm,
      exportDialogVisible,
      cancelExport,
      searchRef,
      exportMenu,
      handleSelectionChange,
      delMultipleTable,
      multipleTable,
      searchForm,
      toDetail,
      option,
      optionValue,
      tableData,
      importDialogVisible,
      info,
      infoForm,
      edit,
      pageSize,
      pageNum,
      totalNum,
      getFoodData,
      addFood,
      fileList,
      submitImport,
      handleSuccess,
      del,
      reset,
      search,
      limitNum,
      exceedFile,
      beforeUploadFile,
      handleError,
      multipleSubmit,
      menuStatus,
      menuDown,
      signMenuDown,
    } = menuManger();
    const header = reactive({
      Authorization: Cookies.get("token"),
    });
    const { pageSizeChange, pageCurrentChange } = commonPageRepository(
      pageSize,
      pageNum,
      getFoodData
    );
    return {
      exportRef,
      exportMenu,
      pageSizeChange,
      delMultipleTable,
      searchRef,
      multipleTable,
      searchForm,
      pageCurrentChange,
      option,
      optionValue,
      tableData,
      importDialogVisible,
      info,
      infoForm,
      pageSize,
      pageNum,
      totalNum,
      edit,
      addFood,
      header,
      fileList,
      submitImport,
      handleSuccess,
      del,
      toDetail,
      search,
      reset,
      handleSelectionChange,
      limitNum,
      exceedFile,
      beforeUploadFile,
      handleError,
      exportDialogVisible,
      cancelExport,
      exportForm,
      importFormRef,
      cancelImport,
      multipleSubmit,
      menuStatus,
      menuDown,
      signMenuDown,
      handleClose,
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  margin-top: 20px;
  padding: 20px;
  height: calc(100vh - 200px);
  border-radius: 6px;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  background: #ffffff;
  overflow-y: auto;

  .header {
    display: flex;
    justify-content: space-between;
  }
}
</style>
